<template>
  <div class="wrapper">
    <mt-header fixed title="成功之路"></mt-header>
    <div class="content-wrapper">
      <mt-tab-container v-model="tabSelected" :swipeable="true" class="tab-container">
        <mt-tab-container-item id="tab1">
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <mt-cell v-for="item in list" :key="item" :title="item.name + ' ' + item.price"></mt-cell>
          </mt-loadmore>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab2">
          <mt-cell v-for="n in 25" :key="n" :title="'tab-container 2 =>'+n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab3">
          <mt-cell v-for="n in 27" :key="n" :title="'tab-container 3 =>'+n"></mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <mt-tabbar fixed v-model="tabSelected">
      <mt-tab-item id="tab1">
        <i slot="icon" class="fa fa-task"></i>
        任务
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <img slot="icon">
        悬赏
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <img slot="icon">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import service from '../services'
export default {
  name: 'index',
  data () {
    return {
      tabSelected: 'tab1',
      allLoaded: false,
      list: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      return service.list().then(rep => {
        this.list = rep.data.data
      })
    },
    loadTop () {
      this.fetchData().then(() => {
        this.$refs.loadmore.onTopLoaded()
      })
    },
    loadBottom () {
    }
  }
}
</script>

<style scoped lang="scss">
li{
  line-height:150px;
}
.wrapper{
  .content-wrapper{
    padding-bottom:55px;
    height:100%;
  }
}
</style>
